<template>
    <div v-show="showToast" class="uploadProgress">
        <div class="mb-10 text">{{ percentage < 100 ? '文件下载中,请耐心等待' : '文件下载已经完成' }}</div>
        <el-progress :percentage="percentage" :stroke-width="22" :text-inside="true"></el-progress>
    </div>
</template>

<script>
export default {
    name: "UploadProgress",
    data() {
        return {
            showToast: false,
            percentage: 0
        }
    },
    watch: {
        percentage(newval) {
            if (newval === 100) {
                setTimeout(() => {
                    this.showToast = false;
                    this.percentage = 0;
                }, 1000)
            }
        }
    },
    methods: {
        show() {
            this.showToast = true;
        }
    }
}
</script>

<style lang="scss" scoped>
.uploadProgress {
    position: fixed;
    width: 300px;
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #88a7cd;
    margin: 0 calc(50% - 160px);
    background: white;
    bottom: 10px;
    z-index: 5000;
    
    .text {
        font-size: 1rem;
    }
}
</style>
